import echarts, { EChartOption } from "echarts";

export function baroption(data: { name: string, quantity: number }[]): EChartOption {
    let yAxisData: string[] = data.map((item) => item.name)
    let seriesDate: number[] = data.map((item) => item.quantity)
    return {
        title: {
            text: '数量统计:',
            textStyle: {
                color: '#fff'
            },
            top: '15%',
            left: '5%'
        },
        grid: {
            left: '5%',
            right: '20%',
            bottom: '0',
            top: '28%',
            containLabel: true,
        },
        xAxis: {
            type: 'value',
            show: false,
        },
        yAxis: [
            {
                type: 'category',
                data: yAxisData,
                inverse: true,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    },
                },

                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                width: 50
            },
            {
                type: 'category',
                inverse: true,
                axisTick: 'none',
                axisLine: 'none',
                show: true,
                axisLabel: {
                    textStyle: {
                        color: '#ffffff',
                        fontSize: '12'
                    },
                },
                data: seriesDate
            }
        ],
        series: [{
            data: seriesDate,
            zlevel: 1,
            type: 'bar',
            barWidth: 10,
            itemStyle: {
                barBorderRadius: 30,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: 'rgb(57,89,255,1)'
                }, {
                    offset: 1,
                    color: 'rgb(46,200,207,1)'
                }])
            },
            showBackground: true
        }]
    } as unknown as EChartOption;
}
